<ion-header>
  <div class="uh bor_b bc-head" data-control="HEADER" id="Header">
    <div class="ub">
      <div class="nav-btn widthh" id="nav-left" (click)="navCtrl.pop()">
        <div class="ub-img1 back_btn_img"></div>
      </div>
      <h1 class="ut ub-f1 ulev-3 ut-s tx-c color_black" tabindex="0">好友排名</h1>
      <div class="nav-btn widthh" id="nav-right"></div>
    </div>
  </div>
</ion-header>


<ion-content>
    <ion-refresher (ionRefresh)="doRefresh($event)">
      <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新..." refreshingSpinner="circles" refreshingText="请稍等...">
      </ion-refresher-content>
    </ion-refresher>
  <div class="ub   ub-ver " id="dt_list">
    <div class="ub ub-ver ">
      <div class="ub color666 bc-head umh5">
        <div class="ub ub-ac ub-pc ub-f1 umh4 " [ngClass]="{'bor_tex_red':bor_red0 }" (click)="qiehuan(0)">
          总榜单
        </div>
        <div class="ub ub-ac ub-pc ub-f1 umh4 " [ngClass]="{'bor_tex_red': bor_red1}" (click)="qiehuan(1)">
          月榜单
        </div>
        <div class="ub ub-ac ub-pc ub-f1 umh4 " [ngClass]="{'bor_tex_red': bor_red2}" (click)="qiehuan(2)">
          周榜单
        </div>
      </div>
      <!--总榜 -->
      <!-- <div class="ub ub-ver ub-f1 mar_t7 " id="btn1_y" [hidden]="!bor_tex_red[0]"> -->
      <div class="ub ub-ver ub-f1 mar_t7 " id="btn1_y">
        <div class="bc-head" id="list1_me">

          <div *ngFor="let item of list1_me" class="bor_b" style="padding: 0.5em 0.7em;" (click)="openPerson(item)">
            <div class="ub ub-ac height5">
              <div class="ub ">
                <ng-container *ngIf="item.RN==3||item.RN==2||item.RN==1; else elseTemplate">
                  <div *ngIf="item.RN == 1" class="ub ub-img " style="background-image: url(assets/imgs/img/number1.png);width: 2em;height: 2em;"></div>
                  <div *ngIf="item.RN == 2" class="ub ub-img " style="background-image: url(assets/imgs/img/number2.png);width: 2em;height: 2em;"></div>
                  <div *ngIf="item.RN == 3" class="ub ub-img " style="background-image: url(assets/imgs/img/number3.png);width: 2em;height: 2em;"></div>
                </ng-container>
                <ng-template #elseTemplate>
                  <div class="ub ub-pc" style="width: 2em;"> {{item.RN}} </div>
                </ng-template>
              </div>
              <div class="ub ub-img1 user_wh28 " [ngStyle]="{'background-image': item.HeadPortrait | imgUrl:'HeadportraitUrl':'backImg'}"
                style="margin-left: 0.5em;"></div>
              <div class="ub  ub-f1 pad_left7 fontsize9"> {{item.Title}} </div>
              <div class="ub ub-ac ub-pc ub-ver ubl bc-border" style="width: 3em;">
                <div>{{item.Integral?'0':item.Integral}} </div>
                <div class="ub-img1 zuanshi_wh zuanshi1_img umar-t"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="ub ub-ver mar_t7 bc-head " id="list1">
          <div *ngFor="let item of list1" class="bor_b" style="padding: 0.5em 0.7em;" (click)="openPerson(item)">
            <div class="ub ub-ac height5">
              <div class="ub ">
                <ng-container *ngIf="item.RN==3||item.RN==2||item.RN==1; else elseTemplate">
                  <div *ngIf="item.RN == 1" class="ub ub-img " style="background-image: url(assets/imgs/img/number1.png);width: 2em;height: 2em;"></div>
                  <div *ngIf="item.RN == 2" class="ub ub-img " style="background-image: url(assets/imgs/img/number2.png);width: 2em;height: 2em;"></div>
                  <div *ngIf="item.RN == 3" class="ub ub-img " style="background-image: url(assets/imgs/img/number3.png);width: 2em;height: 2em;"></div>
                </ng-container>
                <ng-template #elseTemplate>
                  <div class="ub ub-pc" style="width: 2em;"> {{item.RN}} </div>
                </ng-template>
              </div>
              <div class="ub ub-img1 user_wh28 " [ngStyle]="{'background-image': item.HeadPortrait | imgUrl:'HeadportraitUrl':'backImg'}"
                style="margin-left: 0.5em;"></div>
              <div class="ub  ub-f1 pad_left7 fontsize9"> {{item.Title}} </div>
              <div class="ub ub-ac ub-pc ub-ver ubl bc-border" style="width: 3em;">
                <div>{{item.Integral?'0':item.Integral}} </div>
                <div class="ub-img1 zuanshi_wh zuanshi1_img umar-t"></div>
              </div>
            </div>
          </div>
        </div>
        <list-bottom *ngIf="forbidFinite"></list-bottom>
      </div>
      <!--月榜 -->
      <!-- <div class="ub ub-ver ub-f1 mar_t7" id="btn2_y" [hidden]="!bor_tex_red[1]">
        <div class="bc-head" id="list2_me">

        </div>
        <div class="ub ub-ver mar_t7 bc-head" id="list2">

        </div>
      </div> -->
      <!--周榜 -->
      <!-- <div class="ub ub-ver ub-f1 mar_t7" id="btn3_y" [hidden]="!bor_tex_red[2]">
        <div class="bc-head" id="list3_me">

        </div>
        <div class="ub ub-ver mar_t7 bc-head" id="list3">

        </div>
      </div> -->

    </div>
  </div>
</ion-content>